<template>
	<view>
		<!-- 搜索栏 -->
		<view class="header">
			<input type="text" placeholder="共有857142道菜" class="searchInput" />
		</view>
		<!-- 滑块 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000" :circular="true"
			class="swiper">
			<swiper-item v-for="item in swiperData" :key="item.goods_id">
				<view class="swiper-item">
					<image :src="item.image_src" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 分类 -->
		<ul class="title">
			<li v-for="item in catitems" :key="item._id" >
				<view class="listBox">
					<image :src="item.image_src" @tap="jump" :data-name="item.name"></image>
				</view>
				<text>{{item.name}}</text>
			</li>
		</ul>
		<!-- 小滑块模块 -->
		<view class="litteSwiperBox">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
				class="litteSwiper">
				<swiper-item v-for="(item,index) in floorsdata[0].floor_imgs" :key="index">
					<view class="litteSwiper-item">
						<image :src="item" mode=""></image>
					</view>
				</swiper-item>
			</swiper>

			<view class="litteSwiperRightBox">
				<view class="rightBox" v-for="item in floorsdata.slice(1)" :key="item._id">
					<image :src="item.floor_imgs" mode=""></image>
				</view>
			</view>
		</view>
		<view class="tips">
			冬至吃饺子
		</view>
		<!-- 详细内容 -->
		<view class="tuijian">
			精品推荐
		</view>
		<view class="main">
			<ul v-for="(item,index) in recommend" :key="item._id">
				<li>
					<image :src="item.coverpic" mode=""></image>
				</li>
				<li class="text">
					{{item.name}}
				</li>
				<li class="lastLi">
					<view class="lastBox">
						<text>{{item.collections}}</text>
						<image src="../../static/images/liulan.png" class="image1"></image>
					</view>
					<view class="lastBox">
						<text>{{item.pageview}}</text>
						<image src="../../static/images/shoucamg.png" class="image2"></image>
					</view>
				</li>
			</ul>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperData: [], //轮播图信息
				catitems: [], //分类列表信息
				floorsdata:[],//获取楼层信息
				recommend:[],//获取推荐信息
			}
		},
		onLoad() {
			this.getData(); //获取轮播图
			this.getCatitems(); //获取分类信息
			this.getFloorsdata();//获取楼层
			this.getRecommend();//获取推荐信息
		},
		methods: {
			//获取轮播图
			async getData() {
				const res = await this.$request({
					url: "/home/swiperdata"
				});
				if (res.meta.status === 200) {
					this.swiperData = res.message;
				}
			},
			// 获取分类信息
			async getCatitems() {
				const res = await this.$request({
					url: "/home/catitems"
				});
				if (res.meta.status === 200) {
					this.catitems = res.message;
				}
			},
			//获取楼层
			async getFloorsdata(){
				const res = await this.$request({
					url:"/home/floorsdata"
				})
				if(res.meta.status===200){
					this.floorsdata = res.message;
				}
			},
			//获取推荐信息
			async getRecommend(){
				const res = await this.$request({
					url:"/home/recommend"
				})
				console.log(res);
				if(res.meta.status===200){
					this.recommend = res.message;
				}
			},
			//跳转
			jump(e){
				if(e.currentTarget.dataset.name==="甜点"){
					console.log(1111)
					uni.navigateTo({
						url:"/pages/index/caipusearch"
					})
				}else if(e.currentTarget.dataset.name==="分类"){
					uni.navigateTo({
						url:"/pages/index/cookfenlei/cookfenlei"
					})
				}
			}
		}
	}
</script>

<style scoped>
	/* 这是头部 */
	.header {
		width: 100%;
		height: 45rpx;
		background-color: #ee8131;
		text-align: center;
		display: flex;
		justify-content: center;
		margin-bottom: 30px;
	}

	.searchInput {
		width: 700rpx;
		height: 80rpx;
		background-color: white;
		border-radius: 50rpx;
		box-shadow: 0px 0px 5px 0px #C8C7CC;
	}

	/* 滑块 */
	.swiper {
		width: 700rpx;
		height: 300rpx;
		margin: 10rpx auto;
	}

	.swiper-item {
		width: 700rpx;
		height: 300rpx;
	}

	.swiper-item image {
		height: 300rpx;
		width: 100%;
	}

	/* 标签图标分类 */
	.title {
		width: 700rpx;
		margin: 0 auto;
		/* background-color: #007AFF; */
		list-style: none;
		margin-bottom: 15rpx;
		padding: 0;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.title li {
		width: 70rpx;
		height: 90rpx;
		/* background-color: red; */
		margin: 10rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.listBox {
		width: 70rpx;
		height: 70rpx;
		/* background-image:linear-gradient(#ffc809,#ffa301); */
		border-radius: 50%;
	}

	.listBox image {
		width: 70rpx;
		height: 70rpx;
	}
	
	.title li text {
		font-size: 22rpx;
		text-align: center;
	}

	/* 小轮播图 */
	.litteSwiperBox {
		width: 700rpx;
		height: 362rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		margin-bottom: 26rpx;
	}

	.litteSwiper {
		width: 334rpx;
		height: 100%;
		border-radius: 8rpx;
	}

	.litteSwiperRightBox {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.rightBox {
		width: 340rpx;
		height: 176rpx;
		border-radius: 8rpx;
		position: relative;
	}

	.rightBox image {
		width: 340rpx;
		height: 176rpx;
	}

	.rightBox::before {
		content: "每日开运菜";
		width: 164rpx;
		height: 56rpx;
		background-color: #d86f32;
		border-radius: 8rpx;
		opacity: 0.63;
		position: absolute;
		top: 12rpx;
		left: 12rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 56rpx;
	}

	.rightBox1::before {
		content: "减肥集中营";
	}

	.tips {
		width: 164rpx;
		height: 56rpx;
		background-color: #d86f32;
		border-radius: 8rpx;
		opacity: 0.63;
		color: #FFFFFF;
		text-align: center;
		line-height: 56rpx;
		position: absolute;
		z-index: 10;
		top: 665rpx;
		left: 37rpx;
	}

	.litteSwiper-item image {
		width: 100%;
		height: 362rpx;
	}
	.tuijian{
		width: 700rpx;
		margin: 0 auto;
		margin-bottom: 18rpx;
	}
	/* 详细内容部分 */
	.main {
		width: 700rpx;
		/* height: 300rpx; */
		margin: 0 auto;
		/* background-color: #007AFF; */
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.main ul {
		width: 336rpx;
		height: 334rpx;
		padding: 0;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}

	.main ul li image {
		width: 336rpx;
		height: 248rpx;
		border-radius: 8rpx;
	}

	.lastLi {
		margin-top: 10rpx;
		width: 80%;
		display: flex;
		justify-content: space-between;
	}
	.text{
		color: #C0C0C0;
		font-size: 28rpx;
	}
	.lastLi text {
		color: #C0C0C0;
		font-size: 24rpx;
	}

	.lastBox {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.lastBox text {
		margin-right: 10rpx;
	}

	.main ul li .image1 {
		width: 28rpx;
		height: 22rpx;
	}

	.main ul li .image2 {
		width: 24rpx;
		height: 24rpx;
	}
	scroll-view ::-webkit-scrollbar {
	  width: 0;
	  height: 0;
	  background-color: transparent;
	}
</style>
